<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我喜欢-二级菜单</title>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/element.js"></script>
		<script src="../../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../../css/element.css" />
		<link rel="stylesheet" type="text/css" href="../../../fonts/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/menus/mySong/love.css" />
	</head>
	<body>
		<div id="app">
			<div class="main">
				<!-- 我喜欢二级菜单 -->
				<div class="main-header">
					<span class="nav1" @click="navChange(1)">歌曲({{userInfo.loveSongCount}})</span>
					<span class="nav2" @click="navChange(2)">歌单({{userInfo.loveSheetCount}})</span>
					<span class="nav3" @click="navChange(3)">专辑({{userInfo.loveAlbumCount}})</span>
				</div>
				<div class="iframDiv">
					<iframe id="love2Iframe" :src="navUrl" frameborder="0">
						
					</iframe>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					url: '', //本页面的 url
					user: '', //歌手信息
					// 菜单
					navUrl: 'love/song.html', //菜单指向的地址
					currentIndex: -1,
					userInfo:'' //用户信息-从父页面获取
				}
			},
			mounted() { // 生命周期函数
				this.getUserInfoCount()
				window.getMySongCurrentIndex = this.getMySongCurrentIndex
				window.getUserInfoCount = this.getUserInfoCount
			},
			methods: {
				// 菜单选中为其添加样式
				navChange(navId) {
					console.log(navId)
					// 1、先去掉选择中的样式
					const navsDocument = document.querySelectorAll('.main-header span')
					for (var i = 0; i < navsDocument.length; i++) {
						navsDocument[i].style.color = '#000000'
					}
					this.navUrl = ''
	
					const hrDocument = document.querySelector('#hr')
					// 2、判断用户选中的是哪一个，加上样式
					if (navId == 1) {
						const nav1Document = document.querySelector('.nav1')
						nav1Document.style.color = '#FC6C62'
						this.navUrl = 'love/song.html'
					} else if (navId == 2) {
						const nav1Document = document.querySelector('.nav2')
						nav1Document.style.color = '#FC6C62'
						this.navUrl = 'love/sheet.html'
					} 
					else if (navId == 3) {
						const nav1Document = document.querySelector('.nav3')
						nav1Document.style.color = '#FC6C62'
						this.navUrl = 'love/album.html'
					} 
				},
				// 获取父页面正在播放的下标
				getMySongCurrentIndex(currentIndex) {
					// 调用子页面方法将，正在播放歌曲下标传给子页面
					var iframeDocument = document.getElementById("love2Iframe")
					iframeDocument.contentWindow.getMySongCurrentIndex(currentIndex)
					// iframeDocument.contentWindow.getAlbumCurrentIndex(currentIndex)
				},
				// 根据 token 查找登录用户信息
				getUserInfoCount() {
					axios({
						method: 'get',
						url: 'http://localhost:8160/user/getUserInfo',
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.userInfo = res.data.data.userInfo
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 通过值获取cookie
				getCookie(key) {
					// 如果浏览器中有多个cookie，会以 ；分隔 例如：a=a1;b=b1
					// 根据 ；将 cookie 字符串分割成数组 
					var cookieArr = document.cookie.split("; ");
					// 遍历数组
					for (var i = 0; i < cookieArr.length; i++) {
						// 再根据 = 分隔数组中的每一个元素，数组第一个就是key，第二个就是value
						var cookiePair = cookieArr[i].split("=");
						if (key == cookiePair[0]) {
							return decodeURIComponent(cookiePair[1]);
						}
					}
					return null;
				},
				
			},
		})
	</script>
</html>